<template>
  <h2>组合式api</h2>
  <p>count:{{ count }}</p>
  <p>doubleCount:{{ doubleCount }}</p>
  <button @click="fn">btn</button>
  <input type="text" ref="ipt" />
  <p>countco:{{ storeco.countco }}</p>
  <p>doublecountco:{{ storeco.doublecountco }}</p>
  <br />
  <button @click="fn2">btn</button>
  <!-- <p><button @click="reset">reset</button></p> -->
  <Child2 :count="count" :obj="state.obj"></Child2>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, provide } from "vue";
import Child2 from "./components/Child2.vue";
import { useCounterCOStore } from "@/stores/counterCO";
export interface objType {
  name: string;
  age: number;
}
interface stateType {
  str: string;
  obj: objType;
}

const storeco = useCounterCOStore();
const fn2 = (): void => {
  // storeop.opcount++;
  storeco.$patch({
    //加加不行？
    countco: storeco.countco + 1,
  });
};
//重置
// const reset = () => {
//   storeco.$reset();
// };
const count = ref<number>(1);
const fn = (): void => {
  count.value++;
};
const doubleCount = computed<number>(() => {
  return count.value * 2;
});
const state: stateType = reactive({
  str: "hello",
  obj: { name: "zwf", age: 20 },
});
//provide不需要添加任何类型
provide("name", "lisi");
const ipt = ref<HTMLInputElement | null>();
onMounted(() => {
  // ipt.value && ipt.value.focus();
  //可选链操作符
  ipt.value?.focus();
});
</script>
